<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>TL Embedded</title>
  </head>

  <style>
    body {
      background: #ccc;
    }

    #interactive-embed {
      position: relative;
    }

    button#update-interactive-embed {
      position: absolute;
      top: 25px;
      right: 25px;
    }
  </style>
  <body>
    <!--
This is a test file to test the embed mode,
to try this run `npm run start`, and after that run
`npm run start:embed` in a second terminal

-->

    <div
      data-testing-playground
      data-markup="DwIwrgLhD2B2AEB6AfAKFJGDYEMC2ApgLwBEAzgJYDmsYADifBAJ53Hlgh4UQnKU16wROChxkQA"
      data-query="MYewdgLghglmCmAnAdARwK5IJ4GV4Bt5gIREAKAcjgAd0IKBKIA"
      data-panes="markup,preview"
    ></div>

    <template data-testing-playground data-panes="markup,query,result">
      <script type="text/html">
        <button>one</button>
      </script>

      <script type="text/javascript">
        screen.getByRole('button');
      </script>
    </template>

    <template data-testing-playground data-panes="query, result, markup" data-height="250" data-width="80%">
      <script type="text/html">
        <button>one</button>
      </script>

      <script type="text/javascript">
        screen.getByRole('button');
      </script>
    </template>

    <template data-testing-playground data-panes="result, query, markup">
      <script type="text/html">
        <button>one</button>
      </script>

      <script type="text/javascript">
        screen.getByRole('button');
      </script>
    </template>

    <div id="interactive-embed">
      <template data-testing-playground data-class="messaging-iframe"></template>
      <button id="update-interactive-embed">update-content</button>

      <script type="text/javascript">
        function updatePlayground() {
          const iframe = document.querySelector('.messaging-iframe');
          iframe.contentWindow.postMessage(
            { type: 'UPDATE_DATA', markup: `<div>${Date.now()}</div>`, query: `// ${Date.now()}` },
            'http://localhost:1234',
          );
        }

        document.getElementById('update-interactive-embed').addEventListener('click', updatePlayground);

        window.addEventListener('message', ({ data }) => {
          if (data.source === 'embedded-testing-playground' && data.type === 'READY') {
            updatePlayground();
          }
        });
      </script>
    </div>
    <script async src="embed.js" type="module"></script>
  </body>
</html>
